<script setup>
import { ref, onMounted } from 'vue'
import { ElTable, ElTableColumn, ElPagination, ElInput, ElButton, ElIcon } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import courseApi from '../../../api/course.js'

// 定义表格数据
const courseData = ref([])
// 分页数据
const pagination = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

const value = ref('')
const options = [
  {
    value:'',
    label:'',
  }
]
// 搜索关键词
const searchKeyword = ref('')
// 加载状态
const loading = ref(false)

// 获取课程分页数据
const getCourseData = async (pageNum = 1, pageSize = 5, courseName = '') => {
  loading.value = true
  try {
    const response = await courseApi.getCoursePage(pageNum, pageSize, courseName)
    // 修复：根据Result类的实际返回格式处理数据
    if (response && response.code === 200) {
      // 修复：正确处理MyBatis-Plus的Page对象
      courseData.value = response.data.records || []
      pagination.value.total = response.data.total || 0
    } else {
      console.error('获取课程数据失败:', response?.msg || '未知错误')
    }
  } catch (error) {
    console.error('请求课程数据时发生错误:', error)
  } finally {
    loading.value = false
  }
}

// 分页变化时触发
const handleCurrentChange = (currentPage) => {
  pagination.value.currentPage = currentPage
  getCourseData(currentPage, pagination.value.pageSize, searchKeyword.value)
}

// 每页条数变化时触发
const handleSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize
  getCourseData(pagination.value.currentPage, pageSize, searchKeyword.value)
}

// 搜索课程
const handleSearch = () => {
  pagination.value.currentPage = 1
  getCourseData(1, pagination.value.pageSize, searchKeyword.value)
}

// 初始加载数据
onMounted(() => {
  getCourseData()
})
</script>

<template>
  <div class="course-type-container">
    <div class="search-bar">
      <ElInput
          v-model="searchKeyword"
          placeholder="请输入课程名称"
          class="search-input"
          :prefix-icon="Search"
      />
      <ElButton type="primary" @click="handleSearch">搜索</ElButton>
      <div class="selectMajor" style="margin-left: 20px">
        <el-select
            v-model="value"
            filterable
            placeholder="Select"
            style="width: 240px"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
    </div>


    <ElTable
        :data="courseData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="加载中..."
    >
      <ElTableColumn prop="id" label="课程ID" width="80"/>
      <ElTableColumn prop="courseName" label="课程名称" width="200"/>
      <ElTableColumn prop="credits" label="学分" width="100"/>
      <ElTableColumn prop="hours" label="课时" width="100"/>
      <ElTableColumn label="操作" width="150">
<!--        <template #default="scope">-->
<!--          <ElButton type="primary" size="small">编辑</ElButton>-->
<!--          <ElButton type="danger" size="small">删除</ElButton>-->
<!--        </template>-->
      </ElTableColumn>
    </ElTable>

    <div class="pagination-container">
      <ElPagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style>
.course-type-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  text-align: center;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
  margin-right: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

</style>